
<template>
    <div class="cart">
        <!-- 头部 -->
        <div class="header">
            <a href="javascript:history.go(-1)"><van-icon name="arrow-left" class="arrow-left" /></a>
            <van-nav-bar title="购物车" fixed />
        </div>
        <!-- 购物车start -->
        <div style="margin-top: 1.22rem;" class="cart_container">
            <van-empty description="购物车目前还没有商品" image="https://img.yzcdn.cn/vant/custom-empty-image.png">
                <router-link to="/home/medi-serch">
                    <van-button style=" width: 6rem; height: 2.5rem;" round type="danger" class="bottom-button">
                        去购物
                    </van-button>
                </router-link>
            </van-empty>
        </div>
        <van-submit-bar button-text="提交订单" class="settlement">
            <!-- <van-popup v-model:show="show" round :style="{ padding: '64px' }" /> -->
            <van-checkbox style="margin-right:160px ;" checked-color="#f11a27">
                全选
            </van-checkbox>
        </van-submit-bar>
        <!-- 结算end -->
    </div>
</template>
   
<script lang="ts" setup>
// import { ref } from 'vue';
// const show = ref(false);
// const showPopup = () => {
//     show.value = true;
// };
// import { showDialog } from 'vant';
// showDialog({
//     message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
//     theme: 'round-button',
// }).then(() => {
//     close
// });
// import { reactive, ref } from 'vue';
// import { useRouter } from 'vue-router';
// const store = reactive([])
// // 空状态
// const isShow = ref(false)
// const emptyStatus = () => { store.length == 0 ? isShow.value = true : isShow.value = false }
// // 进入购物车通过本地缓存中购物车里的数据渲染页面，并给每一条数据添加checked属性
// const getCarts = () => {
//     // 清空数据
//     store.length = 0
//     let arr = JSON.parse(localStorage.getItem('carts'))
//     if (arr) {
//         arr.forEach(el => {
//             el.checked = false
//         })
//         store.push(...arr)
//         localStorage.setItem('carts', JSON.stringify(store))
//     }
//     emptyStatus()
// }
// getCarts()

// // 全选控制单选   ref取值用value  赋值也是用value
// const allChecked = ref(false)
// const onAll = () => {
//     store.forEach(el => {
//         el.checked = allChecked.value
//     })
//     localStorage.setItem('carts', JSON.stringify(store))
//     getTotal()
// }
// // 单选控制全选
// const onChecked = () => {
//     // 商品都被选中时，全选按钮高亮
//     allChecked.value = store.every(el => {
//         return el.checked
//     })
//     localStorage.setItem('carts', JSON.stringify(store))
//     getTotal()
// }

// // 用户增减商品数量，更新本地存储数据
// const onNum = (quantity) => {
//     localStorage.carts = JSON.stringify(store)
//     getTotal()
// }

// // 金额计算
// let total = ref(0)
// const getTotal = () => {
//     // 所有被选项组成数组返回
//     let userCheck = store.filter(val => {
//         return val.checked == true
//     });
//     total.value = 0
//     userCheck.map(el => {
//         total.value += el.sell_price * el.num
//     })
// }


// // 删除商品
// const onDelete = (item) => {
//     store.length = 0
//     let arr = JSON.parse(localStorage.getItem('carts'))
//     let id = item.id
//     let deleteArr = arr.filter(el => {
//         return el.id != id
//     })
//     store.push(...deleteArr)
//     if (store.length == 0) {
//         allChecked.value = false
//         emptyStatus()
//     }
//     localStorage.setItem('carts', JSON.stringify(deleteArr))
//     getTotal()
// }

// // 提交
// const router = useRouter()
// const onSubmit = () => {
//     router.push('/shopping')
// }
</script>
   
<style  scoped>
.cart {
    margin: 0.3rem;
    padding: 0.05rem 0 3rem 0;
}


.cart_container {
    margin-top: 1.22rem;

}


.delete-button {
    display: block;
    color: #c82519;
    margin-top: 0.7rem;
    margin-right: 0.1rem;
}



.bottom-button {
    width: 3rem;
    height: 1rem;
}


.settlement {
    margin-bottom: -0.1rem;
}
</style>